<template>
  <div class="home">
    <a-row class="metrics metrics-btn" :gutter="8">
      <a-col :span="6">
        <div class="metrics-imte">
          <div class="metrics-imte-title">24小时-访问量(PV)</div>
          <div class="metrics-imte-metrics">
            <div class="metrics-imte-metrics-l">{{ metrics.Count }}</div>
            <div class="metrics-imte-metrics-r"></div>
          </div>
          <div ref="container" style="height: 80px"></div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="metrics-imte">
          <div class="metrics-imte-title">24小时-IP数</div>
          <div class="metrics-imte-metrics">
            <div class="metrics-imte-metrics-l">{{ metrics.IP4Count }}</div>
          </div>
          <div ref="containerIp" style="height: 80px"></div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="metrics-imte">
          <div class="metrics-imte-title">24小时-CK数(UV)</div>
          <div class="metrics-imte-metrics">
            <div class="metrics-imte-metrics-l">{{ metrics.CKFCount }}</div>
          </div>
          <div ref="containerCkf" style="height: 80px"></div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="metrics-imte">
          <div class="metrics-imte-title">24小时-JA4数(UV)</div>
          <div class="metrics-imte-metrics">
            <div class="metrics-imte-metrics-l">{{ metrics.JA4Count }}</div>
          </div>
          <div ref="containerJa4" style="height: 80px"></div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue'
import { Chart } from '@antv/g2'
import { type UserMetricsParams } from '@/api/home/model/metrics'
import { getList, getCKFList, getIP4List, getJA4List } from '@/api/home/metrics'

let params: UserMetricsParams = {
  type: 3,
  startTime: '2012-10-10 00:00:00',
  endTime: '2212-10-10 00:00:00'
}
let metrics = reactive({
  Count: 3,
  CKFCount: 0,
  IP4Count: 0,
  JA4Count: 0
})
let chart
let chartIp
let chartCkf
let chartJa4
const container = ref(null)
const containerIp = ref(null)
const containerCkf = ref(null)
const containerJa4 = ref(null)
onMounted(() => {
  chart = renderBarChart(container.value)
  chartIp = renderBarIpChart(containerIp.value)
  chartCkf = renderBarCkfChart(containerCkf.value)
  chartJa4 = renderBarJa4Chart(containerJa4.value)
})
async function renderBarChart(container: any) {
  let data = await getList(params)
  if (data) {
    metrics.Count = data.total
  }
  const chart = new Chart({
    container: container,
    autoFit: true,
    margin: 0,
    padding: 0
  })
  chart
    .interval()
    .data(data.items)
    .encode('x', 'date')
    .encode('y', 'metrics')
    .axis({ x: false, y: false })
    .tooltip({
      title: 'date',
      items: [
        {
          name: 'PV',
          field: 'metrics'
        }
      ]
    })
  chart.render()
}
async function renderBarIpChart(container: any) {
  let data = await getIP4List(params)
  if (data) {
    metrics.IP4Count = data.total
  }
  const chart = new Chart({
    container: container,
    autoFit: true,
    margin: 0,
    padding: 0
  })
  chart
    .interval()
    .data(data.items)
    .encode('x', 'date')
    .encode('y', 'metrics')
    .axis({ x: false, y: false })
    .tooltip({
      title: 'date',
      items: [
        {
          name: 'IP',
          field: 'metrics'
        }
      ]
    })
  chart.render()
}
async function renderBarCkfChart(container: any) {
  let data = await getCKFList(params)
  if (data) {
    metrics.CKFCount = data.total
  }
  const chart = new Chart({
    container: container,
    autoFit: true,
    margin: 0,
    padding: 0
  })
  chart
    .interval()
    .data(data.items)
    .encode('x', 'date')
    .encode('y', 'metrics')
    .axis({ x: false, y: false })
    .tooltip({
      title: 'date',
      items: [
        {
          name: 'CKF',
          field: 'metrics'
        }
      ]
    })
  chart.render()
}
async function renderBarJa4Chart(container: any) {
  let data = await getJA4List(params)
  if (data) {
    metrics.JA4Count = data.total
  }
  const chart = new Chart({
    container: container,
    autoFit: true,
    margin: 0,
    padding: 0
  })
  chart
    .interval()
    .data(data.items)
    .encode('x', 'date')
    .encode('y', 'metrics')
    .axis({ x: false, y: false })
    .tooltip({
      title: 'date',
      items: [
        {
          name: 'JA4',
          field: 'metrics'
        }
      ]
    })
  chart.render()
}
</script>
